import { computed, defineComponent } from 'vue'
import { ref } from 'vue'
import './index.less'

const options = new Map([['theme', '设置主题']])

export default defineComponent({
	name: 'more',
	props: {
		visible: {
			type: Boolean,
			default: false
		}
	},

	setup(props, { emit, slots }) {
		const titleText = ref('列表选项')
		const secondBlockType = ref('')
		const stepCount = ref(0)

		const show = computed({
			get: () => props.visible,
			set: (val) => {
				if (!val) {
					setTimeout(() => {
						init()
					}, 300)
				}
				emit('update:visible', val)
			}
		})
		const title = computed(() => {
			if (stepCount.value === 0) return '列表选项'
			else return titleText.value
		})

		const init = () => {
			stepCount.value = 0
			titleText.value = '列表选项'
		}

		const setOption = (type: 'theme') => {
			secondBlockType.value = type
			titleText.value = options.get(type) || ''
			stepCount.value++
		}

		return () => {
			const headerSlot = () => (
				<div class="header">
					<div
						class="header-left"
						v-show={stepCount.value > 0}
						onClick={() => stepCount.value--}
					>
						<i class="icon iconfont">&#xe671;</i>
					</div>
					<div class="header-text">{title.value}</div>
				</div>
			)
			const defaultSlot = () => (
				<div class="more">
					<div
						class="more-content"
						style={{
							transform: `translateX(-${stepCount.value * 100}%)`
						}}
					>
						<div class="block first-block">
							<ul class="options">
								<li class="option" onClick={() => setOption('theme')}>
									<i class="icon iconfont ahead">&#xeb6e;</i>
									<span class="label">设置主题</span>
									<i class="icon iconfont arrow">&#xe673;</i>
								</li>
							</ul>
						</div>
						<div class="block second-block" v-show={stepCount.value === 1}>
							{slots[secondBlockType.value]?.()}
						</div>
					</div>
				</div>
			)

			return (
				<popup
					v-model={[show.value, 'show', ['modifier']]}
					v-slots={{
						header: headerSlot,
						default: defaultSlot
					}}
				/>
			)
		}
	}
})
